<!DOCTYPE html>
<html>
<head>
	<title>Combination</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlxchart.css"/>
	<script src="../../../codebase/dhtmlxchart.js"></script>
	<style>
		.dhx_axis_item_x{
			font-size: 11px
		}
		.dhx_axis_item_y{
			font-size: 11px
		}
	</style>
	<script>
		var data = [
			{ sales:3.0,  sales2:12.0, year:"2003" },
			{ sales:3.0, sales2:10.0, year:"2004" },
			{ sales:3.4,  sales2:9.0, year:"2005" },
			{ sales:4.1, sales2:8.0, year:"2006" },
			{ sales:4.3, sales2:9.0, year:"2007" },
			{ sales:7.6,  sales2:11.0, year:"2008" },
			{ sales:7.8,  sales2:13.0, year:"2009" },
			{ sales:7.2,  sales2:10.0, year:"2010" },
			{ sales:5.3,  sales2:14.0, year:"20011" },
			{ sales:4.8,  sales2:12.0, year:"2012" }
		];
		var myAreaChart;
		function doOnLoad() {
			myAreaChart =  new dhtmlXChart({
				view:"bar",
				container:"chart",
				value:"#salesA#",
				color:"#00ccff",
				width: 32,
				gradient: "falling",
				alpha: 0.8,
				padding:{
					left:30,
					bottom: 50
				},
				radius:0,
				yAxis:{
				},
				xAxis:{
					lines:true,
					title:"Sales per year",
					template:"#id#"
				},
				legend:{
						layout:"y",
						width:100,
						align:"right",
						valign:"middle",
						values:[
							{text:"Company A",color:"#00ccff"},
							{text:"Company B",color:"#e9df40"},
							{text:"Average",color:"#b25151",toggle:true,markerType: "item"}
						]
					},
				group:{
					by:"#year#",
					map:{
						salesA:["sales2",getAny],
						salesB:["sales",getAny],
						salesAverage:["#sales#",getAverage]
					}
				}
			});
			myAreaChart.addSeries({
				view:"area",
				alpha:0.4,
				value:"#salesB#",
				color:"#e9df40"
			});
			myAreaChart.addSeries({
				view:"line",
				value:"#salesAverage#",
				item:{
					radius:2,
					borderColor: "#7fa505"
				},
				line:{
					color:"#7fa505",
					width:2
				}
			});
			myAreaChart.parse(data,"json");
		};
		function getAny(property, data){
			return data[0][property];
		}
		function getAverage(property,data){
			var count = 0;
			var summ = 0;
			for(var i = 0; i < data.length; i++){
				summ += (parseFloat(data[i].sales)||0);
				summ += (parseFloat(data[i].sales2)||0);
				count +=2;
			}
			return count?summ/count:0;
		}
	</script>
</head>
<body onload="doOnLoad();">
	<div id="chart" style="width:600px;height:250px;border:1px solid #A4BED4;"></div>
</body>
</html>
